<template>
  <a-card>
    <!-- 查询 -->
    <a-form
        ref="searchFormRef"
        :model="search_form"
        @submit="handleSearchSubmit"
        :label-col-props="{ span: 6 }"
        :wrapper-col-props="{ span: 18 }"
        label-align="left"
    >
      <a-row>
        <a-col :flex="1">
          <a-row :gutter="16">
            <a-col :span="8">
              <a-form-item label="用车ID" field="ratingId">
                <a-input placeholder="请输入用车ID" v-model="search_form.ratingId"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="用户ID" field="userId">
                <a-input placeholder="请输入用户ID" v-model="search_form.userId"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="司机ID" field="driverId">
                <a-input placeholder="请输入司机ID" v-model="search_form.driverId"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="评分" field="rating">
                <a-select v-model="search_form.rating" placeholder="请选择评分" allow-clear>
                  <a-option v-for="n in 5" :key="n" :value="n">{{ n }}</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-divider style="height: 84px" direction="vertical"/>
        <a-col :flex="'86px'" style="text-align: right">
          <a-space direction="vertical" :size="18">
            <a-button type="primary" html-type="submit">
              <template #icon>
                <icon-search/>
              </template>
              查询
            </a-button>
            <a-button @click="$refs.searchFormRef.resetFields()">
              <template #icon>
                <icon-refresh/>
              </template>
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>

      <!-- 添加操作 -->
      <a-row>
        <a-col :span="6" style="padding-bottom: 10px">
          <a-space>
            <a-button shape="round">导出表格</a-button>
          </a-space>
        </a-col>
        <a-col :span="12" class="mb-1"></a-col>
      </a-row>
    </a-form>
    <!-- 信息展示 -->
    <a-table
        :columns="columns"
        :data="ratings"
        :pagination="pagination"
        @page-change="handlePaginationChange"
    >
      <template #userWbxqy="{record}">
        {{ record?.user?.usernameWbxqy }}
      </template>
      <template #ratingWbxqy="{record}">
        <a-rate :default-value="record.ratingWbxqy" :count="5" disabled/>
      </template>
      <template #driverWbxqy="{record}">
        {{ record?.carRequest?.driver?.usernameWbxqy }}
      </template>
      <template #operations="{ record }">
        <a-space>
          <a-button type="outline" status="danger" @click="deleteRatingFun(record.ratingIdWbxqy)">
            <template #icon>
              <icon-delete/>
            </template>
            删除
          </a-button>
        </a-space>
      </template>
    </a-table>
  </a-card>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue';
import {deleteRating, getAllRatings} from '@/api/ratingMG';
import {Message} from "@arco-design/web-vue";

const ratings = ref([]);
const pagination = ref({
  current: 1,   // 当前页数
  pageSize: 10, // 每页条数
  total: 0      // 数据总数
});
const columns = [
  {title: 'ID', dataIndex: 'ratingIdWbxqy', slotName: 'ratingIdWbxqy'},
  {title: '用车ID', dataIndex: 'requestIdWbxqy', slotName: 'requestIdWbxqy'},
  {title: '用户', dataIndex: 'userWbxqy', slotName: 'userWbxqy'},
  {title: '司机', dataIndex: 'driverWbxqy', slotName: 'driverWbxqy'},
  {title: '评分', dataIndex: 'ratingWbxqy', slotName: 'ratingWbxqy'},
  {title: '评价内容', dataIndex: 'commentsWbxqy', slotName: 'commentsWbxqy'},
  {
    title: '操作',
    dataIndex: 'operation',
    width: '150',
    align: 'center',
    slotName: 'operations',
    fixed: 'right'
  }
];


// 删除评价
const deleteRatingFun = (ratingIdWbxqy) => {
  deleteRating(ratingIdWbxqy).then((res) => {
    Message.success('删除成功');
    loadRatings();
  }).catch(err => {
    Message.error(err.message);
  });
};

// 查询表单
const search_form = reactive({
  ratingId: '',
  userId: '',
  driverId: '',
  rating: ''
});
const handleSearchSubmit = () => {
  loadRatings();
};
const handlePaginationChange = (page) => {
  pagination.value.current = page;
  loadRatings();
};

// 加载评价数据
const loadRatings = () => {
  getAllRatings(search_form, pagination.value).then((res) => {
    console.log(res)
    ratings.value = res.records;
    pagination.value.total = res.total;
  }).catch((err) => {
    Message.error(err.message);
  });
};

onMounted(() => {
  loadRatings();
});
</script>
